<template>
    <div class="page-login">
      <div class="container">
        <h3 class="title">系统登录</h3>
        <el-form ref="formRef" :rules="rules" :model="formData" size="small">
          <!-- 用户名 -->
          <el-form-item  prop="account">
            <el-input
              prefix-icon="iconfont icon-user"
              v-model="formData.account"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              :type="flag ? 'text' : 'password'"
              v-model="formData.password"
            >
              <i slot="prefix" class="iconfont icon-password"></i>
              <i
                @click="flag = !flag"
                slot="suffix"
                class="iconfont"
                :class="flag ? 'icon-eye-open' : 'icon-eye-close'"
              ></i>
            </el-input>
          </el-form-item>
          <!-- 登录 -->
          <el-form-item>
            <el-button @click="submit" type="primary" class="btn">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
import {mapActions} from 'vuex'
  export default {

    data() {
      return {
        //表单数据
        formData: {
          account: '',
          password: '',
        },
        //眼睛
        flag: false,
        rules: {
            account: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12个字符', trigger: 'blur' }
          ],
        },
      }
    },
    methods:{
      ...mapActions('user',['A_login']),
        submit(){
            this.$refs.formRef.validate(async valid=>{
                if(valid){
                    // 可以开始发送请求
                    // console.log(this.formData);
                    await this.A_login(this.formData)
                    this.$router.push('/home')

                }
                else{
                    alert('用户名或密码不正确')

                }
                
            })

        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .page-login {
    height: 100%;
    background: $menuBg;
  }
  .container {
    width: 300px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .title {
      text-align: center;
      color: white;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .btn {
      width: 100%;
    }
  }
  // ::v-deep .el-input__inner {
  //   background-color: transparent;
  // }
  :deep(.el-input__inner) {
    background-color: transparent;
    color: white;
  }
  </style>
  